<template>
  <div class="Detal">
    <van-nav-bar title="帖子详情" left-text="返回"  left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon name="share" size="20" />
      </template>
    </van-nav-bar>
    <div class="one">
      <van-row type="flex">
        <van-col span="4">
          <van-image  round width="6rem" height="6rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </van-col>
        <van-col span="6" style='margin-top:10px' ><h2 style="text-align: left;">住户一<br><h3>2020-12-22 12：40</h3></h2></van-col><br>
        <van-col span = "24">
          <h2 h2 style="text-align: left;margin-left:10px">
            印刷厂招QQ接单员两名，要求：熟练操作电脑，会PS CDR软件者优先，不要求设计。有一定的沟通能力。无不良嗜好。外地男性提供食宿。地址:北京师范大学珠海分校麦当劳旁边，联系电话：15702095405
          </h2>
        </van-col>
      </van-row>
      <van-row type="flex" justify="end">
        <van-col span="2">
          <van-icon size="17" :class="{ 'shangse': isActive }" @click="shangse(1)" name="like" />
        </van-col>
        <van-col span="2">
          <van-icon size="17" name="comment-o" @click="pingjia"/>
        </van-col>
      </van-row>
    </div>
    <van-popup v-model="show22" :style="{ height: '50%', width: '100%' }" >
      <ping-jia @pingjia22= "pingjia222" />
    </van-popup>
    <van-divider style="margin:0">评论处</van-divider>
    <div class="evalua" v-for="(item,index) of List" :key="item.index" >
      <van-row type="flex">
        <van-col span="2">
          <van-image  round width="4rem" height="4rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        </van-col>
        <van-col span="6"  ><h3 style="text-align: left;">住户一<br><h3>2020-12-22 12：40</h3></h3></van-col><br>
        <van-col span = "24">
          <h2 h2 style="text-align: left;margin-left:10px" >
            {{List[index].text}}
          </h2>
        </van-col>
      </van-row>
    </div>
    <van-divider style="margin:0">暂无新的评价</van-divider>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { Col, Row, Image as VanImage, Icon, NavBar, ShareSheet, Popup, Divider } from 'vant'
import pingjia from './pingjia'
Vue.use(Col).use(Row).use(VanImage).use(Icon).use(NavBar).use(ShareSheet).use(Popup).use(Divider)
export default{
  name: 'one',
  components: {
    'ping-jia': pingjia
  },
  data () {
    return {
      show22: false,
      evalua1: '',
      isActive: 1,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      List: [
        {text: '测试'}
      ]
    }
  },
  methods: {
    shangse (index) {
      if (index === 1) {
        if (this.isActive === 1) {
          this.isActive = 0
        } else {
          this.isActive = 1
        }
      }
    },
    onClickLeft () {
      this.$router.back(-1)
    },
    onClickRight () {
      this.showShare = 1
    },
    pingjia () {
      this.show22 = true
    },
    pingjia222 (no, text) {
      var car = {text: text}
      this.List.push(car)
    }
  }
}
</script>

<style scoped>
.one,.two{
  margin: 10px 0px 0px 0px ;
  padding: 0;
  width: 100%;
  height: auto;
  background-color: rgb(255, 255, 255);
}
.shangse{
  color :red
}
</style>
